var list = [
	{id: 55,name: "TCL&nbsp;98Q10G&nbsp;Mini&nbsp;LED巨幕电视", price: 22999, img: "images/sp01.png",count: 1,maxCount: 5},
	{id: 60,name: "TCL&nbsp;双子舱Q10复式分区洗衣机16kg大容量洗烘一体双直驱变频智能投放家用全自动双滚筒&nbsp;G160Q10-HDY",price: 6999,img: "images/sp16.png",count: 1,maxCount: 10},
	{id: 70,name: "G120Q6-HDY&nbsp;12公斤复式分区双直驱变频全自动分类洗烘滚筒母婴宝宝婴儿洗衣机",price: 6999,img: "images/bx03.jpg",count: 3, maxCount: 10}
]
function updateAmoutAndTotal() {
	var checkedItems = document.querySelectorAll("tbody i.checkbox.checked");
	var amout = 0,
		total = 0;
		checkedItems.forEach(function(item) {
			// 找出勾选的购物记录对应的id
			var id = parseInt(item.parentNode.parentNode.dataset.id)
			// 用id找出list中对应的购物记录
			var target = list.find(function(item) {
				return item.id === id;
			})
			// 购物记录的count值进行累加
			amout += target.count
			total += target.price * target.count
		})
		// 把和显示在页面中的amout上
		document.querySelector("span.amout").innerText = amout;
		document.querySelector("span.total").innerText = total;
}
//  网页动态渲染
function showData() {
	var htmlStr = "";
	list.forEach(function(item) {
		htmlStr +=
		`
			<tr data-id="${item.id}">
				<td>
					<i class="iconfont icon-checkbox checkbox checked"></i>
				</td>
				<td>
					<img src="${item.img}" alt="">
					${item.name}
				</td>
				<td>${item.price}</td>
				<td>
					<button class="btn-decrease"${item.count === 1 ? "disabled": ""}> -</button>
					<span class="count">${item.count}</span>
					<button class="btn-increase"${item.count === item.maxCound ? "disabled": ""}>+</button>	
				</td>
				<td>${item.price * item.count}</td>
				<td>
					<i class="iconfont icon-delete btn-delete"></i>
				</td>
			</tr>
		`;
	
	})
	document.querySelector("table.cart>tbody").innerHTML = htmlStr;
}
showData();
// 第一次更新总数量和总金额
updateAmoutAndTotal();
	// 给thead；里面的checkbox绑定点击事件
document.querySelector("thead i.checkbox").onclick =  function() {
	// 切换它的checked class属性值
	this.classList.toggle("checked");
	// 让tbody里面的所有checkbox的选中的状态和this一致
	document.querySelectorAll("tbody i.checkbox").forEach(function(item) {
		item.classList.toggle("checked", this.classList.contains("checked"))
	},this)
	// 更新总数量和总金额
	updateAmoutAndTotal();
}
// 把tbody里面的checkbox点击事件委托到tbody上进行集中处理
document.querySelector("tbody").addEventListener("click", function(e) {
	// 判断是不是checkbox冒泡上来的事件
	
	if(!e.target.classList.contains("checkbox")) return;
	//  切换自己的勾选状态
	e.target.classList.toggle("checked");
	// 更新thead中的全选状态
	var isAllChecked = document.querySelectorAll("tbody i.checkbox:not(.checked)").length === 0;
	document.querySelector("thead i.checkbox").classList.toggle("checked",isAllChecked)
	// 总金额总数量更新
	updateAmoutAndTotal();
})
// 
//  删除购物车里的商品实现
document.querySelector("tbody").addEventListener("click", function(e) {
	// 判断是不是删除按钮冒泡
	if(!e.target.classList.contains("btn-delete")) return;
	// 询问用户真的要删除吗
	if(!confirm("客官，真的要删除吗?")) return;
	// 取出tr隐藏的id 并且以id记住下标
	var id = parseInt(e.target.parentNode.parentNode.dataset.id);
	var i = list.findIndex(function(item) {
		return item.id === id;
	})
	// 在数组中删除
	list.splice(i,1);
	// 在页面中删除
	e.target.parentNode.parentNode.remove();
	// 更新checked的状态
	var isAllChecked = document.querySelectorAll("tbody i.checkbox:not(.checked)").length === 0;
	document.querySelector("thead i.checkbox").classList.toggle("checked",isAllChecked)
	// 更新总数量和总金额
	updateAmoutAndTotal();
	// 提示用户删除成功
	alert("删除成功");
})
document.querySelector("tbody").addEventListener("click", function(e) {
	// 判断是不是减按钮冒泡
	if(!e.target.classList.contains("btn-decrease")) return;
	// 取出藏值 顺便利用id得到下标
	var id = parseInt(e.target.parentNode.parentNode.dataset.id);
	var target = list.find(function(item) {return item.id === id;})
	// 让目标的数量-1
	target.count -= 1;
	// 更新后面的数量
	e.target.nextElementSibling.innerText = target.count;
	// 更新小计
	e.target.parentNode.nextElementSibling.innerText = `${target.count * target.price}.00元`;
	// 更新如果数量减到1 就不让使用按钮了
	e.target.disabled = target.count === 1
	// 只要减了，就不会是最大数了 就不需要封闭加按钮了
	e.target.nextElementSibling.nextElementSibling.disabled = false;
	updateAmoutAndTotal();
})
document.querySelector("tbody").addEventListener("click", function(e) {
	// 判断是不是加按钮冒泡
	if(!e.target.classList.contains("btn-increase")) return;
	// 取出藏值 顺便利用id得到下标
	var id = parseInt(e.target.parentNode.parentNode.dataset.id);
	var target = list.find(function(item) {return item.id === id;})
	// 让目标的数量加一
	target.count += 1;
	// 更新后面的数量
	e.target.previousElementSibling.innerText = target.count;
	// 更新小计
	e.target.parentNode.nextElementSibling.innerText = `${target.count * target.price}.00元`;
	// 如果加到最大值，就不让使用按钮了
	e.target.disabled = target.count === target.maxCount;
	// 只要加了就不是1了 就可以使用减按钮了
	e.target.previousElementSibling.previousElementSibling.disabled = false;
	updateAmoutAndTotal();
})
document.querySelector("button.btn-settle").onclick = function() {
	window.location.href = "order/order.html";
}